<template>
	<div class="polluteEventList" v-loading="pollEventListLoading">
		<div class="searchBox">
      <el-form inline :model="searchForm" size="mini">
        <el-form-item>
          <p slot="label" class="miniLabel">水站名称</p>
          <el-select v-model="searchForm.station" placeholder="请选择水站名称" clearable>
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item" se></el-option>
            </p>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" label-width="80px">
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              placeholder="选择开始日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2" class="line"> - </el-col>
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              placeholder="选择结束日期">
            </el-date-picker>
          </el-col>
         
        </el-form-item>

        <el-form-item >
          <p class="searchBtns">
            <el-button type="success" class="greenBtn" @click="onSubmit({pageSize: pageSize, pageNum: 1})">筛选</el-button>
            <!-- <el-button type="success" class="subColor" >导出</el-button> -->
          </p>

        </el-form-item>
        
      </el-form>
    </div>
		<div class="eventListBox">
			<div class="title">污染列表</div>
			<el-table :data="polluteEventList.rows"  size="small"
        :header-cell-style="{color: '#454545', borderTop: '1px solid #EBEEF5'}" :cell-style="{lineHeight: '60px', height: '60px'}"
      >
        <el-table-column
          prop="name"
          width="165"
          label="污染编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          width="140"
          label="上报时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="station"
          label="水站名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="factor"
          label="超标因子"
          align="center">
        </el-table-column>
        <el-table-column
          prop="reason"
          label="超标原因"
          align="center">
        </el-table-column>
        <el-table-column
          prop="enterprise"
          label="超标企业"
          align="center">
        </el-table-column>
        
        <el-table-column
          prop="photo"
          label="图片"
          align="center">
          <template>
            暂无
          </template>
        </el-table-column>
        <el-table-column
          prop="person"
          label="上报人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center">
        </el-table-column>
      </el-table>
		  <myPaging :func="pageUpdate" :total="polluteEventList.total"></myPaging>
		</div>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'polluteEventList',
  data () {
    return {
      msg: 'hello polluteEventList!',
      pollEventListLoading: false,
      lastPage: 0,
			searchForm: {
        station: '',
				startTime: '',
        endTime: '',
			},
			eventTable: [
				{
					id: 1,
					name: '沙井3#',
					cbyj: '氨氮',
					cbyy: '企业污水处理站故障',
					cbqy: '海康电子',
					time: '2019.07.01 14:00:00',
					photo: '',
					person: '张三',
					remarks: '备注啊 你好啊'
				},
				{
					id: 1,
					name: '沙井3#',
					cbyj: '氨氮',
					cbyy: '企业污水处理站故障',
					cbqy: '海康电子',
					time: '2019.07.01 14:00:00',
					photo: '',
					person: '张三',
					remarks: '备注啊 你好啊'
				},
				{
					id: 1,
					name: '沙井3#',
					cbyj: '氨氮',
					cbyy: '企业污水处理站故障',
					cbqy: '海康电子',
					time: '2019.07.01 14:00:00',
					photo: '',
					person: '张三',
					remarks: '备注啊 你好啊'
				},
				{
					id: 1,
					name: '沙井3#',
					cbyj: '氨氮',
					cbyy: '企业污水处理站故障',
					cbqy: '海康电子',
					time: '2019.07.01 14:00:00',
					photo: '',
					person: '张三',
					remarks: '备注啊 你好啊'
				},
			]
		}
  },
	methods: {
    ...mapActions([
      'getPolluteEventList'
    ]),
		async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.pollEventListLoading = true

      await this.getPolluteEventList({...this.searchForm, ...pageOption})

      this.pollEventListLoading = false
		},
    pageUpdate(option) {
      this.onSubmit(option)
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      polluteEventList: "getPolluteEventList",

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.searchBox {
	padding: 20px 20px 0;
  margin-bottom: 15px;
  background-color: #fff;
}
.searchBox .line {
  text-align: center;
}
.eventListBox {
	background: #fff;
	padding: 0 20px 40px 20px;
}
.eventListBox .title {
  position: relative;
  color: #666;
  line-height: 70px;
  font-size: 16px;
  margin-left: 15px;
}
.eventListBox .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.paging {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding-right: 5%;
	margin-top: 35px;
}
.paging .pagingBtn {
	color: #15a646;
	padding: 7px 14px;
	background-color: #ffffff;
	box-shadow: 1px 1px 5px 0px 
		rgba(0, 36, 2, 0.26);
	border-radius: 5px;
	margin-right: 12px;
	cursor: pointer;
	transition: .2s ease-in;
}
.paging .pagingBtn:hover,
.paging .pagingBtn:focus {
	background: #15a646;
	color: #fff;
}


</style>